<template>
	<view class="page">
		<u-navbar :is-back="true" :custom-back="BackM" title="修改计费方式" back-text=""></u-navbar>
		<view style="text-align: center;padding: 15rpx 0;">-门店计费方式-</view>
		<view class="" style="background-color: #fff;padding: 0 15px;">
			<view class="" style="display: flex;border-bottom: 1px solid #f5f5f5;">
				<view class="" style="flex: 5;padding: 1em 0;">
					计费模式：
				</view>
				<view class="" style="flex: 11;">
					<view class="">
						<u-radio-group v-model="value" @change="radioGroupChange">
							<u-radio @change="radioChange" v-for="(item, index) in list" :key="index" :name="item.name" :disabled="item.disabled">
								{{item.name}}
							</u-radio>
						</u-radio-group>
					</view>
				</view>
			</view>
			<view class="" style="display: flex;padding: 1em 0;border-bottom: 1px solid #f5f5f5;">
				<view class="" style="flex: 5;">
					计费单价(元)：
				</view>
				<input v-model="unitPrice" class="" style="flex: 11;text-align: left;" placeholder="2.00">

				</input>
			</view>
			<view class="" style="display: flex;padding: 1em 0;">
				<view class="" style="flex: 5;">
					封顶值(元)：
				</view>
				<input v-model="capValues" class="" style="flex: 11;" placeholder="20.00">

				</input>
			</view>
			<view class="" style="display: flex;padding: 1em 0;">
				<view class="" style="flex: 5;">
					设备备注：
				</view>
				<input v-model="remark" class="" style="flex: 11;" placeholder="">

				</input>
			</view>
			<view class="" style="display: flex;padding: 1em 0;">
				<view class="" style="flex: 5;">
					所在位置备注：
				</view>
				<input v-model="location" class="" style="flex: 11;" placeholder="">

				</input>
			</view>
		</view>
		<u-button @click="update" type="success" style="border-radius: 0;position: fixed;bottom: 0;width: 100%;">提交</u-button>
	</view>
</template>

<script lang="js">
	import {
		updateTerminalCostConfig
	} from "../../utils/uniApi"
	export default {
		data() {
			return {
				id: '',
				list: [{
						name: '30分钟计费制度',
						disabled: false
					},
					{
						name: '60分钟计费制度',
						disabled: false
					}
				],
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				value: '30分钟计费制度',
				unitPrice: '', //计费单价
				capValues: '', //封顶值
				remark: '', //设备备注
				location: '' //所在位置备注
			}
		},
		onLoad(option) {
			this.id = JSON.parse(option.id)
			console.log(this.id)
			this.value = this.id.billingPattern == 1 ? '30分钟计费制度' : '60分钟计费制度'
			this.unitPrice = this.id.billingPrice
			this.capValues = this.id.billingMaxPrice
			this.remark = this.id.remarks
			this.location = this.id.location

		},
		methods: {
			// 选中某个单选框时，由radio时触发
			radioChange(e) {
				// console.log(e);
				// if (e == '30分钟计费制度') {
				// 	this.value = 1
				// } else {
				// 	this.value = 2
				// }
				// console.log(this.value);
			},
			// 选中任一radio时，由radio-group触发
			radioGroupChange(e) {
				// 	// console.log(e);
				// 	this.value = e
			},
			BackM() {
				uni.navigateBack({
					delta: 1
				})
			},
			update() {
				let params = {
					// userId: uni.getStorageSync("userId") == "" ? "" : parseInt(uni.getStorageSync("userId")),
					id: this.id.id, //设备ID
					billingPattern: this.value == '30分钟计费制度' ? 1 : 2, //计费模式（ 1: 30 分钟,2: 60 分钟）
					billingPrice: this.unitPrice, //计费单价
					billingMaxPrice: this.capValues, //计费封顶价
					remarks: this.remark, //设备备注
					location: this.location //所在位置备注
				}
				updateTerminalCostConfig(params).then((res) => {
					console.log(res, '调试编辑')
					// uni.showToast({
					// 	title: "修改成功"
					// })
					uni.navigateBack({
						delta: 1
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		height: 100%;
		background-color: #f5f5f5;
	}
</style>
